<template>
  <el-dialog
    :width="900"
    v-model="visible"
    title="抽查计划管理"
    @close="cancel"
  >
    <div class="search">
      <MForm
        :fields="fields"
        :col-attrs="24"
        :label-width="200"
        @submit="search"
        @cancel="reset"
      />
      <el-button type="primary" @click="save(undefined)" v-if="$checkAuth('qualifiedSpotChecksSpotCheckPlanManagementAdd')"> 新增 </el-button>
    </div>
    <MTable
      :columns="columns"
      :http="planPage"
      :params="params"
      v-model:isReload="isReload"
      v-model:selectKeys="selectKeys"
      :height="400"
    >
      <template #actions="{ row }">
        <MSvgIconTooltip
          name="edit"
          content="编辑"
          @click="save(row.sorgSpotCheckPlanId, row.planName, row.year)"
          v-if="$checkAuth('qualifiedSpotChecksSpotCheckPlanManagementEdit')"
        ></MSvgIconTooltip>
        <MSvgIconTooltip
          name="del"
          content="删除"
          @click="del(row.sorgSpotCheckPlanId)"
          v-if="$checkAuth('qualifiedSpotChecksSpotCheckPlanManagementDel')"
        ></MSvgIconTooltip>
      </template>
    </MTable>
    <!--<template #footer>-->
    <!--  <div class="btns">-->
    <!--    <el-button> 取消 </el-button>-->
    <!--    <el-button type="primary"> 确定 </el-button>-->
    <!--  </div>-->
    <!--</template>-->
  </el-dialog>
  <el-dialog
    :width="600"
    v-model="formVisible"
    title="新增"
    @close="formCancel"
    align-center
  >
    <el-form
      ref="ruleFormRef"
      :model="form"
      :rules="rules"
      label-width="auto"
      class="demo-ruleForm"
      status-icon
    >
      <el-form-item label="年度计划" prop="planName">
        <el-input v-model="form.planName" placeholder="请输入年度计划" />
      </el-form-item>
      <el-form-item label="年度计划" prop="year">
        <el-date-picker v-model="form.year" type="year" placeholder="年度" style="width: 100%" value-format="YYYY"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div style="display: flex; justify-content: flex-end; width: 100%">
        <el-button @click="resetForm()">取消</el-button>
        <el-button type="primary" @click="submitForm()" v-loading="loading">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { fields, columns, tableData } from './config'
import { planAddOrUpd, planDel, planPage } from '@/api/spotCheck/spotCheck'
import { ElMessage } from 'element-plus'

const emit = defineEmits(['reloadYear'])

const visible = ref(false)

const cancel = () => {
  visible.value = false
}

const selectKeys = ref<number[]>([])
const params = ref<any>({})
const isReload = ref(true)
function search(data: any) {
  params.value = {
    ...params.value,
    ...data
  }
}

// 重置
function reset(data: any) {
  params.value = {
    ...params.value,
    ...data
  }
}

// 重置
function reload(data?: any) {
  isReload.value = true
  selectKeys.value = []
}

const show = (types) => {
  params.value.types = types
  form.types = types
  visible.value = true
}
defineExpose({ show })

//新增年度计划
const formVisible = ref(false)
const save = (id = undefined, planName, year) => {
  sorgSpotCheckPlanId.value = id
  if (id) {
    form.planName = planName
    form.year = year
  } else {
    form.planName = ''
    form.year = ''
  }
  formVisible.value = true
}

const formCancel = () => {
  formVisible.value = false
}

//新增
const form = reactive({
  planName: '',
  year: '',
  types: ''
})

const rules = ref({
  planName: [{ required: true, message: '请输入', trigger: 'change' }],
  year: [{ required: true, message: '请选择', trigger: 'change' }]
})

const sorgSpotCheckPlanId = ref(undefined)
const loading = ref(false)
const ruleFormRef = ref()
const submitForm = () => {
  ruleFormRef.value.validate((valid) => {
    if (!valid) return
    loading.value = true
    planAddOrUpd({ ...form, sorgSpotCheckPlanId: sorgSpotCheckPlanId.value })
      .then((res) => {
        ElMessage.success(sorgSpotCheckPlanId.value ? '编辑成功' : '新增成功')
        formVisible.value = false
        reload()
        emit('reloadYear')
      })
      .finally(() => {
        loading.value = false
      })
  })
}

const resetForm = () => {
  formVisible.value = false
}

const del = (id) => {
  planDel({ sorgSpotCheckPlanId: [id] }).then((res) => {
    ElMessage.success('删除成功')
    reload()
    emit('reloadYear')
  })
}
</script>

<style scoped lang="scss">
.search {
  display: flex;
  justify-content: space-between;
}
.btns {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 10px 0;
}
</style>
